<template>
	<div class="test">
		 <!--sql调试模态框-->
		<el-dialog title="修改转发数据" :visible.sync="ModifyFot">
			 <el-form :model="addForm" :rules="rules" ref="addForm"  class="demo-ruleForm">
					<el-form-item label="选择操作" :label-width="formLabelWidth" prop="msg">
								<el-select v-model="addForm.msg" prop="msg" placeholder="请选择" style="width:83%">
								<el-option label="转发至另外的TOPIC" value="转发至另外的TOPIC"></el-option>
								<el-option label="转发至MYSQL" value="转发至MYSQL"></el-option>
							</el-select>
						</el-form-item>
					 <el-form-item label="TOPIC" :label-width="formLabelWidth" prop="topic" >
						<el-input v-model="addForm.topic" auto-complete="off" style="width:83%"></el-input>
					</el-form-item>
					<el-form-item label="MYSQL" :label-width="formLabelWidth" prop="mysql">
							<el-select v-model="addForm.mysql" prop="mysql" style="width:83%">
							<el-option label="mysql1" value="mysql1"></el-option>
							<el-option label="mysql2" value="mysql2"></el-option>
					</el-select>					  
				 </el-form-item>
				 <el-form-item label="TABLE" :label-width="formLabelWidth" prop="table">
					<el-select v-model="addForm.table" prop="table" style="width:83%">
							<el-option label="table1" value="table1"></el-option>
							<el-option label="table2" value="table2"></el-option>
					</el-select>
				 </el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
					<el-button @click="ModifyFot=false">取 消</el-button>
					<el-button type="primary"  @click="submitform('addForm')">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
import bus from '../../eventBus.js'
export default{
	name:'addMode',
	data(){
		return{
			addForm:{
				msg:null,
				topic:null,
				mysql:null,
				table:null
			},
			ModifyFot:false,
			formLabelWidth:'120px',				
			count:{},
			rules:{
				msg:[
					{required:true,message:'请选择操作',trigger:'change'}
				],
				topic:[
					{required:true,message:'话题不能为空',trigger:'blur'}
				],
				mysql:[
					{required:true,message:'请选择数据库',trigger:'change'}
				],
				table:[
					{required:true,message:'请选择表格',trigger:'change'}
				]
			}
		}
	},
	watch:{
		ModifyFot:function(){
			var self=this;
			this.$nextTick(function(){
				// 获取数据
				let user = sessionStorage.getItem('ModifyFot');
				if (user) {
					user = JSON.parse(user);
					self.addForm = user;
					console.log(self.addForm);
				}
			});
		},
	},
	methods:{
		submitform(formName){
			this.$refs[formName].validate((valid) => {
				if (valid) {
					console.log(this.addForm);
					this.ModifyFot=false;
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		}
	},
	mounted(){
		var self=this;
		bus.$on("ModifyFot",function (msg) {
			self.ModifyFot=msg;
		});
	}
}

</script>


<style>


</style>